<template>
  <div class="index">
    <div>
      <account-search />
    </div>
    <div class="accountOperation">
      <add-account @closeEdit="closeEdit" />
      <account-recovery />
    </div>
    <div class="app-container" :style="{width: tableWidth}">
      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="加载中"
        border
        fit
        highlight-current-row
      >
        <el-table-column
          type="selection"
          width="55"
          align="center"
        />
        <el-table-column label="帐号" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.accountName }}
          </template>
        </el-table-column>
        <el-table-column align="center" label="昵称" width="200">
          <template slot-scope="scope">
            {{ scope.row.accountNick }}
          </template>
        </el-table-column>
        <el-table-column label="帐号状态" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.status }}
          </template>
        </el-table-column>
        <el-table-column label="权限" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.accountPower }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.createTime }}
          </template>
        </el-table-column>
        <el-table-column class-name="status-col" label="操作" align="center">
          <template slot-scope="scope">
            <el-button type="info" round size="small" @click="handleLookClick(scope.row)">查看</el-button>
            <el-button type="primary" round size="small" @click="handleEditorClick(scope.row)">编辑</el-button>
            <el-button type="danger" round size="small" @click="handleRemoveClick(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:center;margin-top:15px">
        <el-pagination
          background
          layout="prev, pager, next"
          :total="40"
          @current-change="handleCurrentChange"
        />
      </div>
      <edit-function :look-status="lookStatus" :row="row" :status-id="statusId" @closeEdit="closeEdit" />
      <alter-function :alter-status="alterStatus" :row="row" :status-id="statusId" @closeEdit="closeEdit" />
    </div>
  </div>
</template>

<script>
import { getList, removeAccount } from '@/api/table'
import AccountSearch from './components/accountSearch'
import accountRecovery from './components/accountRecovery'
import addAccount from './components/addAccount'
import editFunction from './components/editFunction'
import alterFunction from './components/alterFunction'

export default {
  components: {
    addAccount,
    editFunction,
    alterFunction,
    accountRecovery,
    AccountSearch
  },
  data() {
    return {
      list: null,
      listLoading: true,
      lookStatus: false,
      alterStatus: false,
      statusId: '',
      listLength: '',
      row: {},
      tableWidth: '100%'
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    // 首次进入刷新列表
    fetchData() {
      const date = {
        pageNum: '1',
        pageSize: '10'
      }
      this.listLoading = true
      getList(date).then(response => {
        const data = response.data
        this.list = data.list.reverse() // 列表添加顺序
        this.listLength = data.list.length
      })
      this.listLoading = false
    },
    // 查看帐号信息
    handleLookClick(row) {
      this.row = row
      this.lookStatus = true
    },
    // 编辑帐号
    handleEditorClick(row) {
      this.row = row
      this.alterStatus = true
    },
    // 删除帐号
    handleRemoveClick(id) {
      this.listLoading = true
      removeAccount({ id: id }).then(res => {
        if (res.resultCode === '0000') {
          this.$message({
            message: '删除成功！',
            type: 'success'
          })
        }
      })
      this.fetchData()
      // this.handleCurrentChange()
      this.listLoading = false
    },
    // 刷新帐号列表
    closeEdit(data) {
      if (data === 'alter') { // 编辑/添加
        this.fetchData()
        this.alterStatus = false
      } else if (data === 'look') { // 查看
        this.lookStatus = false
      }
    },
    // 分页获取
    handleCurrentChange(val) {
      console.log(val)
      const date = {
        pageNum: val,
        pageSize: '10'
      }
      this.listLoading = true
      getList(date).then(res => {
        const data = res.data
        this.list = data.list.reverse()
      })
      this.listLoading = false
    }
  }
}
</script>

<style>
  .el-button+.el-button{
    margin-left: 0;
  }
  .el-select{
    width: 100%
  }
</style>
<style scoped>
  .accountOperation {
    display: flex;
    align-items: center;
  }
</style>
